<template>
  <div class="form-body">
    <div v-if="showItems">
      <el-steps :active="chooseIndex-1" simple>
        <el-step title="步骤 1" icon="el-icon-edit" @click.native="handleChangeStep($event,1)"></el-step>
        <el-step title="步骤 2" icon="el-icon-upload" @click.native="handleChangeStep($event,2)"></el-step>
        <el-step title="步骤 3" icon="el-icon-picture" @click.native="handleChangeStep($event,3)"></el-step>
      </el-steps>
      <FormA ref="FormA" :id="1" v-show="chooseIndex===1">
        <template #btn v-if="type === 'edit'">
          <el-button type="primary" @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="validateHandler">提 交</el-button>
        </template>
      </FormA>
      <FormB ref="FormB" :id="2" v-show="chooseIndex===2">
        <template #btn v-if="type === 'edit'">
          <el-button type="primary" @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="validateHandler">提 交</el-button>
        </template>
      </FormB>
      <FormC ref="FormC" :id="3" v-show="chooseIndex===3">
        <template #btn v-if="type === 'edit'">
          <el-button type="primary" @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="validateHandler">提 交</el-button>
        </template>
      </FormC>
      <div class="tips" v-show="type==='edit'">tips:上面的步骤条 点名字可以切换</div>
    </div>

    <div v-else>
      <el-button @click="handleAdd">新增表单</el-button>
      <el-button @click="handleEdit">编辑表单</el-button>
      <div style="margin-top: 20px">{{ storageData }}</div>
    </div>
  </div>
</template>

<script>
import FormA from '@/components/throwControl/formA'
import FormB from '@/components/throwControl/formB'
import FormC from '@/components/throwControl/formC'

export default {
  name: "throwControl",
  components: {FormA, FormB, FormC},
  provide() {
    return {
      main: this,
    }
  },
  data() {
    return {
      showItems: false,
      type: '',
      chooseIndex: 1,
      formData: {},
      asyncData: {},
      storageData: localStorage.getItem('formData')
    }
  },
  watch: {
    showItems(n) {
      if (!n) {
        this.storageData = localStorage.getItem('formData')
      }
    }
  },
  methods: {
    handleSub() {
      console.log('原始表单', this.formData)
      let newFormData = {}
      for (let key in this.formData) {
        newFormData = {...newFormData, ...this.formData[key]}
      }
      console.log('处理后可发送的表单', newFormData)
      localStorage.setItem('formData', JSON.stringify(newFormData))
    },

    handleAdd() {
      this.type = 'add';
      this.formData = {}
      this.showItems = true
    },
    handleEdit() {
      this.type = 'edit';
      this.asyncData = JSON.parse(localStorage.getItem('formData'))
      if (!this.asyncData) {
        this.$message.warning('没有数据，请先新增')
        return
      }
      this.showItems = true
    },

    handleChangeStep(e, index) {
      if (this.type !== 'edit') return
      if (e.target.className.includes('el-step__title')) this.chooseIndex = index
    },

    async validateHandler() {
      try {
        // 此处必须加await，不然promise被reject后下面的代码还是会执行 await只有等resolve了才会继续执行
        await this.$refs.FormA.validateFormData()
        await this.$refs.FormB.validateFormData()
        await this.$refs.FormC.validateFormData()
        this.$message.success('修改成功')
        this.handleSub()
        this.showItems = false
      } catch (e) {
        this.chooseIndex = e
      }
    },
    handleCancel() {
      this.showItems = false
      this.chooseIndex = 1
    }
  }
}
</script>

<style scoped>
.form-body {
  padding: 20px;
}

>>> .el-step__title {
  cursor: pointer;
}

.tips {
  margin-top: 20px;
  color: red;
}

</style>
